<template>
<div>
  <Header></Header>
  <div class="mainBox w1200 bc mt20 clearfix mb15">
    <userSideMenu :flag="'failPage'" ref="userSide"></userSideMenu>
    <div class="mainRight fr w930">
      <!--收藏的游记-->
      <div class="br2 bg100 pb60">
        <!--title-->
        <h1 class="h60 bb90  c60 clearfix ">
          <a :class="(tagIndex===0)?'ml30 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom curborder_grn_bottom':'ml30 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom'" href="javascript:void (0);" @click="changeNav(0)">场地</a>
          <a :class="(tagIndex===1)?'fl h60 f18 fm-yahei  lh60  c60  ml120 hoverborder_grn_bottom curborder_grn_bottom':'fl h60 f18 fm-yahei  lh60  c60  ml120 hoverborder_grn_bottom'" href="javascript:void (0);" @click="changeNav(1)">活动</a>
          <a :class="(tagIndex===2)?'fl h60 f18 fm-yahei  lh60 c60 ml120 hoverborder_grn_bottom curborder_grn_bottom':'fl h60 f18 fm-yahei  lh60 c60 ml120 hoverborder_grn_bottom' " href="javascript:void (0);" @click="changeNav(2)">游记</a>
        </h1>
        <!--list-->
        <ul v-if="tagIndex===0" class="w880 pl25 pr25  c60 f12 lh18 fm-yahei  pointer">
          <li class="pt30 pb30 bb90 clearfix" v-for = "(item, index) in placeList">
            <img class="fl br2 w310 h200 mr20" :src="(item['imgUrl'])?item['imgUrl'].split(',')[0]+'?x-oss-process=image/resize,m_fill,h_200,w_310':'static/images/preload.png'" width="310" height="200" alt="" />
            <dl class="fl w550 h200">
              <dt class="c0 lh30 f20 clearfix">{{item['placeName']}}</dt>
              <dd class="mt10">
                <table class="w550 f12 c40 fm-songti lh20 tl vt" border="0" cellspacing="" cellpadding="">
                  <tr>
                    <td class="pb5">
                      <b class=" c7">类型：</b>
                      <span>{{item['placeTypeName']}}</span>
                    </td>
                    <td  class="pb5">
                      <b class="c7">距离：</b>
                      <span>{{initMap(item['lat'], item['lng'])}}KM</span>
                    </td>
                  </tr>
                  <tr>
                    <td  class="pb5">
                      <b  class="c7">难度：</b>
                      <i v-for="(i,index) in 5" class="grayStar" :class="{redStar:item['difficulty']>index}"></i>
                    </td>
                  </tr>
                </table>
              </dd>
              <dd class=" mt10 h40 overflow ">{{limitWord((item.summary===null||item.summary==="")?jsonToHtml(item.jsonDescription):item.summary,150,"...")}}</dd>
              <dd class="mt20 f12 fm lh150 clearfix">
                <p class="fl c_red_ce2636">
                  {{item['auditingRemark']}}
                </p>
                <a href="javascript:void(0);" class=" fr bg_org_e0613a c100 h28 lh28 pl25 pr25 br2 letter1 hoverfont_unl" @click="editPlace(item['id'])">编辑</a>
              </dd>
            </dl>
          </li>
        </ul>
        <ul v-if="tagIndex===1" class="w880 pl25 pr25  c60 f12 lh18 fm-yahei  pointer">
          <li class="pt30 pb30 bb90 clearfix" v-for="(item,index) in activeList">
            <img class="fl br2 w310 h200 mr20" :src="item['coverImgUrl']+'?x-oss-process=image/resize,m_fill,h_200,w_310'" width="310" height="200" alt="" />
            <dl class="fl w550 h200">
              <dt class="c0 lh30 f20 clearfix">{{item['activityName']}}<span class="fr f12 c60 lh150"><i class="inline-block w10 h14 locationBg vm"></i>{{item['provinceName']}}&nbsp;.&nbsp;{{item['regionName']}}</span></dt>
              <dd class="mt10">
                <table class="w550 f12 c40 fm-songti lh20 tl vt" border="0" cellspacing="" cellpadding="">
                  <tr>
                    <td class="pb5">
                      <b class="c7">活动日期：</b>
                      <span>{{item['startTime']}}</span>
                      <span class="mr5 ml5">至</span>
                      <span>{{item['endTime']}}</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="pb5">
                      <b class="c7 vm">活动星级：</b>
                      <i v-for="(i,index) in 5" class="grayStar ml10" :class="{redStar:item.difficulty>index}"></i>
                    </td>
                    <td class="pb5" v-if="item['activityPlaceList'].length!=0">
                      <b class="c7">场地：</b>
                      <span v-for="(place, index) in item['activityPlaceList']" v-if="index<=1">{{limitWord(place['placeName'],5,"...")}}<i class="mr10 ml10" v-if="item['activityPlaceList'].length>=2&&index===0">|</i></span>
                    </td>
                  </tr>
                </table>
              </dd>
              <dd class=" mt10 h60 overflow ">{{limitWord(item['activityDescripition'],40,'...')}}</dd>
              <dd class="c60 f12 fm lh28 mt10 clearfix">
                <span class="inline-block vm c_red_ce2636">{{item['auditingRemark']}}</span>
                <a href="javascript:void(0);" class=" fr bg_org_e0613a c100 h28 lh28 pl25 pr25 br2 letter1 hoverfont_unl" @click="editActive(item['id'])">编辑</a>
              </dd>
            </dl>
          </li>
        </ul>
        <ul v-if="tagIndex===2" class="w880 pl25 pr25  c60 f12 lh18 fm-yahei  pointer" >
          <li class="pt30 pb30 bb90 clearfix" v-for="(item, index) in travelList">
            <img class="fl br2 w310 h200 mr20" :src="item['coverImgUrl']+'?x-oss-process=image/resize,m_fill,h_200,w_310'" width="310" height="200" alt="" />
            <dl class="fl w550 h200">
              <dt class="c0 lh30 f20 clearfix">{{item['activityName']}}
                <span class="fr f12 c60 lh150" v-if="item['activityPlaceList'].length>0">
                  <i class="inline-block w10 h14 locationBg vm mr5"></i>{{item['activityPlaceList'][0]['placeName']}}
                </span>
              </dt>
              <dd class="lh38 mt20">
                <img :src="item['userImgUrl']" width="38" height="38" style="border-radius:19px"/>
                <span class="ml15 mr20">{{item['nickName']}}</span>
                <span>发表于：{{item['addTime']}}</span>
              </dd>
              <dd class=" mt18 h60 overflow ">{{limitWord(item['activityDescripition'],40,'...')}}</dd>
              <dd class="c60 f12 fm lh150 mt10">
                <span class="inline-block vm c_red_ce2636">{{item['auditingRemark']}}</span>
                <a href="javascript:void(0);" class=" fr bg_org_e0613a c100 h28 lh28 pl25 pr25 br2 letter1 hoverfont_unl" @click="editTravel(item['journalType'], item['id'])">编辑</a>
              </dd>
            </dl>
          </li>
        </ul>
        <li class="tc c60 f12 lh60 mt10">
          <a class="c60 hoverfont_unl" href="javascript:void(0);" @click = "getMore" ref="infoListBox">点击查看更多></a>
        </li>
      </div><!--热门活动结束-->
    </div><!--mainRight结束-->
  </div>
  <Footer></Footer>
  <loading v-show="loadState"></loading>
</div>
</template>

<script>
  import Header from "../../components/header";
  import Footer from "../../components/footer";
  import userSideMenu from "../../components/usersidemenu";
  import Utils from "../../assets/Util";
  import loading from "../../components/loading";
  export default {
    name: 'userVerifyFailed',
    components:{
      Header,
      Footer,
      userSideMenu,
      loading
    },
    data(){
      return{
        loadState:true,
        tagIndex:0,
        placeList:[],
        activeList:[],
        travelList:[],
        getInfoData:{
          "type": 1,
          "auditing": 2,
          "userID": localStorage.getItem("uId"),
          "token": localStorage.getItem("token"),
          "pageIndex": 0,
          "pageSize": 8
        }
      }
    },
    mounted(){
      if (!Utils.isLogin){
        this.$router.push({path:'/'})
      }
      this.getFailedPlace();
    },
    methods:{
      // 切换tab
      changeNav(value){
        this.tagIndex = value;
        this.loadState = true;
        this.getInfoData.pageIndex = 0;
        switch (value) {
          case 0:
            this.placeList = [];
            this.getFailedPlace();
            break;
          case 1:
            this.activeList = [];
            this.getFailedAct();
            break;
          case 2:
            this.travelList = [];
            this.getFailedTravel();
            break
        }
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      },
      limitWord(words, wordsLength, mark){
        return Utils.limitworld(words, wordsLength, mark);
      },
      // jsonToHtml 兼容富文本
      jsonToHtml: function(json){
        let array = json.split('[{').join('').split('}]').join('').split('},{');
        return this.getText(array);
      },
      getText(argument) {
        let txt = "";
        for (let i = 0; i < argument.length; i++) {
          let Item = argument[i].split(',');
          for (let n = 0; n < Item.length; n++) {
            let ItemArr = Item[n].split(':');
            if (ItemArr[0].split("\"").join("") === "title") {
              txt += ItemArr[1].split("\"").join("")
            }
          }
        }
        return txt.replace(/[\\n]/g, "")
      },
      // 请求审核失败的场地
      getFailedPlace(){
        this.getInfoData.type = 1;
        this.getInfoData.token = localStorage.getItem("token");
        this.getInfoData.userID = localStorage.getItem("uId");
        let props = {
          url:"/User/GetAuditingList",
          data:this.getInfoData,
          sCallBack:res => {
            this.loadState = false;
            if(res.data.code === 4){
              this.refreshToken(this.getFailedPlace())
            }else if(res.data.code === 1){
              if (res.data.data.length <= 0){
                if (this.getInfoData.pageIndex === 0){
                  this.$refs.infoListBox.innerText = "暂无数据";
                  return false;
                }
                this.$message.success("数据请求完毕");
                return false;
              }else {
                this.$refs.infoListBox.innerText = "点击加载更多";
              }
              this.placeList = this.placeList.concat(res.data.data);
            }else{
              this.$message.error("请求信息失败");
            }
          },
          eCallBack:err => {
            this.$message.error("请求信息失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 跳转编辑场地页
      editPlace(id){
        this.$router.push({
          path: '/field/createField',
          query: {
            id:id
          }
        })
      },
      // 请求审核失败的活动
      getFailedAct(){
        this.getInfoData.type = 0;
        this.getInfoData.token = localStorage.getItem("token");
        this.getInfoData.userID = localStorage.getItem("uId");
        let props = {
          url:"/User/GetAuditingList",
          data:this.getInfoData,
          sCallBack:res => {
            this.loadState = false;
            if(res.data.code === 4){
              this.refreshToken(this.getFailedAct())
            }else if(res.data.code === 1){
              if (res.data.data.length <= 0){
                if (this.getInfoData.pageIndex === 0){
                  this.$refs.infoListBox.innerText = "暂无数据";
                  return false;
                }
                this.$message.success("数据请求完毕");
                return false;
              }else {
                this.$refs.infoListBox.innerText = "点击加载更多";
              }
              this.activeList = this.activeList.concat(res.data.data);
            }else{
              this.$message.error("请求信息失败");
            }
          },
          eCallBack:err => {
            this.$message.error("请求信息失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 跳转编辑活动页
      editActive(id){
        this.$router.push({
          path: '/activity/editAct',
          query: {
            id:id
          }
        })
      },
      // 请求审核失败的游记
      getFailedTravel(){
        this.getInfoData.type = 2;
        this.getInfoData.token = localStorage.getItem("token");
        this.getInfoData.userID = localStorage.getItem("uId");
        let props = {
          url:"/User/GetAuditingList",
          data:this.getInfoData,
          sCallBack:res => {
            this.loadState = false;
            if (res.data.data.length <= 0){
              if (this.getInfoData.pageIndex === 0){
                this.$refs.infoListBox.innerText = "暂无数据";
                return false;
              }
              this.$message.success("数据请求完毕");
              return false;
            }else {
              this.$refs.infoListBox.innerText = "点击加载更多";
            }
            if(res.data.code === 4){
              this.refreshToken(this.getFailedTravel())
            }else if(res.data.code === 1){
              if (res.data.data.length <= 0){
                this.$message.success("数据请求完毕");
                return false;
              }
              this.travelList = this.travelList.concat(res.data.data);
            }else{
              this.$message.error("请求信息失败");
            }
          },
          eCallBack:err => {
            this.$message.error("请求信息失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 跳转编辑游记页
      editTravel(type, id){
        let pathUrl = "";
        switch (type) {
          case 0:
            pathUrl = "/travel/createTra";
            break;
          case 1:
            pathUrl = "/travel/createTraCircle";
            break;
        }
        this.$router.push({
          path: pathUrl,
          query: {
            id:id
          }
        })
      },
      // 加载更多
      getMore(){
        this.getInfoData.pageIndex += 1;
        switch (this.tagIndex) {
          case 0:
            this.getFailedPlace();
            break;
          case 1:
            this.getFailedAct();
            break;
          case 2:
            this.getFailedTravel();
            break
        }
      },
      computeDistance(startCoords, destCoords){
        let startLatRads = this.degreesToRadians(startCoords.latitude);
        let startLoingRads = this.degreesToRadians(startCoords.longitude);
        let destLatRads = this.degreesToRadians(destCoords.latitude);
        let destLongRads = this.degreesToRadians(destCoords.longitude);
        let Radius = 6371;
        return Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLoingRads - destLongRads)) * Radius;
      },
      degreesToRadians(degrees){
        return (degrees * Math.PI) / 180;
      },
      initMap(lat, lng){
        let startCoords = {
          latitude: localStorage.getItem("lat"),
          longitude:localStorage.getItem("lng")
        };
        let destCoords = {
          latitude: lat,
          longitude:lng
        };
        let km = this.computeDistance(startCoords,destCoords);
        return Math.floor(km);
      }
    }
  }
</script>

<style scoped>

</style>
